웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
프레임워크 NuxtJS에서 오디오 출력을 위해서 <audio> 태그를 사용하였으나 인코딩에 따른 파싱 에러가 발생하였습니다. 이 경우 해결 방법을 간략히 알아봅니다.
audio 태그를 사용하여 음성을 출력하려고 했으나 에러가 발생했습니다. 제일 먼저 에러의 로그를 확인해보니 원인은 NuxtJS에서 사용되는 Webpack의 트랜스파일링 과정에서 에러였습니다. 좀 더 확인해보니 음성 파일을 /assets 경로에 추가하여 사용하였는데 이 부분이 문제였습니다. assets에 저장된 static 파일을 그냥 사용하지 않기 때문이었죠.
해결 방법은 Webpack을 사용하지 않고 불러오면 해결될 수 있었습니다. 가장 먼저 /assets에 위치한 음성 파일(mp3 또는 wav) 등을 /static으로 이동해서 사용하면 해결됩니다. 이 때 주의할 부분은 nuxt에서 /statics 경로를 따로 지정할 필요 없다는 부분이죠. 즉 아래와 같습니다.
간단하게 해결되었습니다. 이제 해결 과정을 순서대로 정리하면 아래와 같습니다.
여기까지 에러 해결 과정은 끝입니다.
추가로 위의 이슈는 잘 동작했는데 <audio>의 autoplay인 자동재생이 동작하지 않았습니다. 앱에 들어올 때 자동으로 재생되게 하려고 했지만 잘 되지 않았죠. 이 경우 <video> 태그와 동일하게 muted 어트리뷰트를 사용하니 동작하더군요. 자동재생이 필요한 경우 이렇게 해결할 수 있습니다. 하지만 muted는 소리가 나지 않으므로 어떻게 할까요?
결국 muted 방법이 아니라면 자동으로 스크립트를 재생하도록 아래와 같이 마운트 시점에 자동재생 코드를 작성할 수도 있겠습니다. 아래 코드를 봐주세요.
스크립트를 사용하여 자동재생 하도록 만든 간략한 코드입니다. 자동재생되도록 onMounted() 라이프사이클 내부에 ref를 사용하여 엘리먼트를 가져온 후 play() 메소드를 수행한 방법입니다.
음성 파일을 muted되지 않고 사용하려면 위와 같이 play() 메소드를 사용하여 마운트 시점에 자동으로 재생되도록 설정이 필요할 수 있겠습니다.
여기까지 nuxtjs에서 발생한 audio 태그 에러의 해결 방법과 자동재생 autoplay 방법을 같이 알아보았습니다.
# NuxtJS Audio 태그 사용시 에러 해결 방법
audio 태그를 사용하여 음성을 출력하려고 했으나 에러가 발생했습니다. 제일 먼저 에러의 로그를 확인해보니 원인은 NuxtJS에서 사용되는 Webpack의 트랜스파일링 과정에서 에러였습니다. 좀 더 확인해보니 음성 파일을 /assets 경로에 추가하여 사용하였는데 이 부분이 문제였습니다. assets에 저장된 static 파일을 그냥 사용하지 않기 때문이었죠.
해결 방법은 Webpack을 사용하지 않고 불러오면 해결될 수 있었습니다. 가장 먼저 /assets에 위치한 음성 파일(mp3 또는 wav) 등을 /static으로 이동해서 사용하면 해결됩니다. 이 때 주의할 부분은 nuxt에서 /statics 경로를 따로 지정할 필요 없다는 부분이죠. 즉 아래와 같습니다.
( O ) /static/my-sound.wav
( X ) /my-sound.wav
간단하게 해결되었습니다. 이제 해결 과정을 순서대로 정리하면 아래와 같습니다.
- <audio /> 태그 사용시 Webpack이 사용되면서 인코딩 에러 발생
- 사용된 src의 경로가 nuxtjs 앱의 /assets를 바라보고 있어 변경이 필요
- /assets에서 사용한 경로를 /statics으로 변경하기 위해 파일을 이동
- 정상적으로 잘 동작 확인
여기까지 에러 해결 과정은 끝입니다.
! audio 태그 자동재생 autoplay 사용하기
추가로 위의 이슈는 잘 동작했는데 <audio>의 autoplay인 자동재생이 동작하지 않았습니다. 앱에 들어올 때 자동으로 재생되게 하려고 했지만 잘 되지 않았죠. 이 경우 <video> 태그와 동일하게 muted 어트리뷰트를 사용하니 동작하더군요. 자동재생이 필요한 경우 이렇게 해결할 수 있습니다. 하지만 muted는 소리가 나지 않으므로 어떻게 할까요?
결국 muted 방법이 아니라면 자동으로 스크립트를 재생하도록 아래와 같이 마운트 시점에 자동재생 코드를 작성할 수도 있겠습니다. 아래 코드를 봐주세요.
<template>
<audio ref="audioEle">
<source src="/my-sound.mp3" />
</audio>
</template>
<script>
import { onMounted, ref } from 'vue';
export default {
setup() {
const audioEle = ref(null)
onMounted(() => {
audioEle.value.play()
})
}
return {
audioEle
}
}
</script>
<audio ref="audioEle">
<source src="/my-sound.mp3" />
</audio>
</template>
<script>
import { onMounted, ref } from 'vue';
export default {
setup() {
const audioEle = ref(null)
onMounted(() => {
audioEle.value.play()
})
}
return {
audioEle
}
}
</script>
스크립트를 사용하여 자동재생 하도록 만든 간략한 코드입니다. 자동재생되도록 onMounted() 라이프사이클 내부에 ref를 사용하여 엘리먼트를 가져온 후 play() 메소드를 수행한 방법입니다.
audioEle.value.play()
음성 파일을 muted되지 않고 사용하려면 위와 같이 play() 메소드를 사용하여 마운트 시점에 자동으로 재생되도록 설정이 필요할 수 있겠습니다.
여기까지 nuxtjs에서 발생한 audio 태그 에러의 해결 방법과 자동재생 autoplay 방법을 같이 알아보았습니다.
아래의 글도 찾고 계시지 않나요?
